<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>操作dom树</title>
</head>

<body>
    <div id="box" style="width: 100px;height: 150px;font-size: 16px;background: rgb(236, 111, 20)">dom树</div>
    <div id="box2">insetBrfore</div>
    <script>
        var box = document.getElementById("box")
        var tempP = document.createElement('p') // 只会创建一个空白元素，如果需要增加文本，需要加入文本节点
        tempP.appendChild(document.createTextNode('textnode'))

        console.log(tempP.nodeType)
        console.log(tempP.value)

        console.log(tempP)
        console.log(tempP.nodeName)
        console.log(tempP.nodeValue)

        box.appendChild(tempP)


        let box2 = document.getElementById("box2")
        let node2 = document.createElement("p")
        node2.appendChild(document.createTextNode("node2--insertbefore"))
        box2.parentNode.insertBefore(node2,box2)

        // style属性.有很大的局限性，只能获取内嵌样式
        console.log('====')
        console.log(typeof box.nodeName) //string
        console.log(typeof box.style) //object
        console.log(box.style.color) //object
        console.log(box.style.fontSize) //object
        console.log(box.style.width) //object
        console.log(box.style.height) //object
        console.log(box.style.background) //object

        box.style.height = '160px' // style对象的属性 永远是一个字符串

    </script>
</body>

</html>